<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>js交互效果之手风琴</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			body {
				display: flex;
				/* 水平垂直居中对齐 */
				align-items: center;
				justify-content: center;
				/* vh和vw：视区、视界或可视范围的高度和宽度（主要是手机=移动端）*/
				height: 100vh;
				background-color: #333;
			}
			/* 打印背景颜色展示 */
			.wrap {
				display: flex;
				width: 90vw;
			}

			.card {
				/* 背景大小 */
				background-size: auto 100%;
				/* 背景位置 */
				background-position: center;
				/* 重复 */
				background-repeat: no-repeat;
				/* 图片圆角 */
				border-radius: 50px;
				color: #fff;
				flex: 0.5;
				cursor: pointer;
				height: 80vh;
				/* 相对定位 */
				position: relative;
				margin: 10px;
				/* 过渡			效果	 */
				transition: flex 0.7s cubic-bezier(0.05, 0.6, 0.4, 0.9);
			}
			/* html添加图片 */
			.card h3 {
				font-size: 20px;
				/* 绝对定位 */
				position: absolute;
				bottom: 20px;
				left: 20px;
				margin: 0;
							/* 透明度	由慢到快 */
				transition: opacity 0s ease-in 0s;
			}
			/* 展示卡片序号的位置 */
			.active {
				/*通过弹性布局方式，改变每个盒子的收缩*/
				flex: 5;
			}

			.card.active h3 {
				opacity: 1;
				transition: opacity 0.3s ease-in 0.4s;
			}
			/* 媒体查询	最大宽度 */
			@media (max-width: 500px) {
				.wrap {
					width: 100vw;

				}
				/* 第几个子元素 */
				.card:nth-child(4) {
					display: none;
				}

				.card:nth-child(5) {
					display: none;
				}
			}
		</style>
	</head>
	<body>
		<!-- .wrap>.card*5>h3 -->
		<div class="wrap">
			<div class="card active" style="background:url(img/timg.jpg) ;">
				<h3>1</h3>
			</div>
			<div class="card" style="background:url(img/timg.jpg) ;">
				<h3>2</h3>
			</div>
			<div class="card" style="background:url(img/timg.jpg) ;">
				<h3>3</h3>
			</div>
			<div class="card" style="background:url(img/timg.jpg) ;">
				<h3>4</h3>
			</div>
			<div class="card" style="background:url(img/timg.jpg);">
				<h3>5</h3>
			</div>
		</div>
		<script type="text/javascript">
			// 获取小卡片
			var wrap = document.querySelector('.wrap');
			var cards = wrap.querySelectorAll(".card");
			// 打印出来展示
			console.log(wrap);
			console.log(cards);

			//遍历节点给cards添加移入事件，并添加active类名即可实现手风琴收缩效果

			for (var i = 0; i < cards.length; i++) {
						//增加监听器			 鼠标悬停
				cards[i].addEventListener('mouseover', function() {
					//事前先清除下 最后一步
					removeActive()
					//给当前的card添加active类名
					this.className = "card active"
				})
			}

			function removeActive() {
				for (var i = 0; i < cards.length; i++) {
					cards[i].className = "card";
				}
			}
		</script>
	</body>
</html>
